﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2019 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
  
  https://vectortiles.ign.fr/demonstrateur/
  http://calac-4.ign.fr/pyramide_ecran/demonstrateur.html
  
  Documentation:
  https://geoservices.ign.fr/documentation/services/api-et-services-ogc/tuiles-vectorielles-tmswmts
-->
  <title>ol-ext: Geoportail vector tile</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/png" href="https://openlayers.org/assets/theme/img/logo70.png" />

  <meta name="description" content="Geoportail vector tile" />
  <meta name="keywords" content="openlayers, ol, geoportail, layer, source, vector, tile, style" />

  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- chroma.js -->
  <script type="text/javascript" src="https://gka.github.io/chroma.js/libs/chroma.min.js"></script>
  <!-- Spectrum -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.2/spectrum.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.css" />
  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/v6.3.1/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <script type="text/javascript" src="../olms.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <link rel="stylesheet" href="./map.layer.gppvtile.css" />
  <style>
    #map {
      right: 0;
    }
  </style>
  
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Geoportail vector tile</h1>
  </a>
  <p class="info">
    Testing <a href="https://geoservices.ign.fr/documentation/geoservices/vecteur-tuile.html">Geoportail vector tiles</a>.
  </p>
  <label class="bulle"><input type="checkbox" onclick="showPopup($(this).prop('checked'))" /> Bulle au survol</label>

  <!-- DIV pour la carte -->
  <div id="map"></div>
  
  <script>
// The map
var map = new ol.Map({
  target: 'map',
  view: new ol.View ({
    zoom: 15,
    center: [261204.43490751847, 6250258.191535994]
  }),
  // layers: [ new ol.layer.Geoportail('ORTHOIMAGERY.ORTHOPHOTOS')]
});
map.addControl(new ol.control.Permalink());

map.addControl(new ol.control.SearchBAN({ zoomOnSelect: 15 }));

// Vector layer
var vlayer = new ol.layer.VectorTile({
  title: "Plan IGN vecteur",
  renderMode: 'hybrid',
  source: new ol.source.VectorTile({
    tilePixelRatio: 1,
    tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }),
    format: new ol.format.MVT(),
    projection: new ol.proj.Projection({code:"EPSG:3857"}),
    url : 'https://wxs.ign.fr/topographie/geoportail/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf',
    //url : 'https://data.geopf.fr/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf',
    //"https://wxs.ign.fr/latuile/geoportail/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf",
    attributions: '<a href="https://geoservices.ign.fr/blog/2018/07/08/nouveautes_vecteur.html">&copy; IGN-Géoportail</a>',
  }),
  declutter: true
});
map.addLayer(vlayer);

ol.ext.Ajax.get({
  url: 'https://wxs.ign.fr/static/vectorTiles/styles/BDTOPO/classique.json',
  success: function(style) {
    olms.applyStyle(vlayer, style, 'bdtopo').then(function () {});
  }
});


// Selection
var selStyle = ol.style.Style.defaultStyle(true)
selStyle.push(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 3,
    fill: new ol.style.Fill({ color: '#f00' })
  }),
  geometry: function(f) {
    return new ol.geom.Point(f.getGeometry().getFirstCoordinate())
  }
}))
var select = new ol.layer.Vector({ 
  source: new ol.source.Vector(),
  style: selStyle
});
map.addLayer(select);

// Log properties
map.on('click', function(e) {
  var f = map.getFeaturesAtPixel(e.pixel)[0]
  if (f) {
    console.clear();
    console.table(f.getProperties())
  }
})

// Show tooltip on hover
var tooltip  = new ol.Overlay.Tooltip({ className: 'default', positioning: 'bottom-center' });
map.addOverlay(tooltip);

function showPopup(b) {
  tooltip.setInfo('');
  hover.setActive(b);
}

var hover = new ol.interaction.Hover({ 
  cursor: "pointer",
  layers: [vlayer]
});
hover.setActive(false);
map.addInteraction(hover);
function showPopup(b) {
  tooltip.setInfo('');
  hover.setActive(b);
}
hover.on("enter", function(e) {
  var showGeom = $('#showSel').prop('checked');
  // hover.setCursor("pointer");
  var feature = e.feature;
  if (select.getSource().getFeatures().length) select.getSource().clear();
  var info = '';
  if (feature && feature.get('layer')!=='fond_opaque') {
    info = '<h2>'+feature.get('layer').replace(/_/g,' ')+'</h2>';
    ['symbo', 'nature', 'rond_point', 'sens_circu', 'texte', 'nom_desabrege', 'numero', 'hauteur'].forEach(function(a) {
      if (feature.get(a)) info += '<br/>'+a.replace(/_/g,' ')+': '+feature.get(a);
    })
  }
  tooltip.setInfo(info);
  //console.log(feature.getProperties());
  // Select feature 
  if (showGeom) {
    var coords = [];
    if (feature instanceof ol.Feature) {
      select.getSource().addFeature(feature);
    } else {
      var c = feature.getFlatCoordinates();
      for (var i=0; i<c.length; i+=2) {
        coords.push ([c[i],c[i+1]]);
      }
      // console.log(feature.getType())
      switch (feature.getType()) {
        case 'Point': {
          coords = coords.pop();
          break;
        }
        case 'LineString' : {
          coords = coords;
          break;
        }
        case 'MultiLineString' : 
        case 'Polygon' : {
          coords = [coords];
          break;
        }
      }
      var geom = new ol.geom[feature.getType()](coords)
      var f2 = new ol.Feature(geom);
      f2.setProperties(feature.getProperties())
      select.getSource().addFeature(f2);
    }
  }
});
hover.on("leave", function(e) {
  tooltip.setInfo('');
  select.getSource().clear();
});

  </script>
  
</body>
</html>